<script setup lang="ts">
const emit = defineEmits([
  "update:visible",
]);
const props = defineProps({
  tab1: {
    default: null,
  },
  tab2: {
    default: null,
  },
  data: {
    type: Array,
    default: null,
  },
  visible: {
    type: Boolean,
    default: false,
  }
});
const columns = ref<any[]>([]);
const title = ref('');
let getTabName = (tab: any) => {
  let text = tab.data.find(item => item.value === tab.activeKey).text;
  if (typeof text === 'string') {
    return text;
  } else {
    return text.props.children[0];
  }
}
const calc = () => {
  if (props.tab1 && props.tab2) {
    // console.log(props.tab1);
    // console.log((props.tab1.data.find(tab => tab.value === props.tab1.activeKey).text));
    title.value = '市场-搜索排行-' + getTabName(props.tab1) + '-' + getTabName(props.tab2);
    if (['searchWord', 'tailWord'].includes(props.tab1.activeKey)) {
      if (props.tab2.activeKey === 'hotList') {

        columns.value = [

          {
            dataIndex: 'date',
            title: '日期',
            width: 200,
            fixed: 'left',
            sorter: (a: any, b: any) => a.date.localeCompare(b.date),
          },
          {
            dataIndex: 'cate',
            title: '类目',
            width: 200,
            fixed: 'left',
            tooltip: true,
            sorter: (a: any, b: any) => a.cate.localeCompare(b.cate),
          }, {
            dataIndex: 'searchWord',
            title: '搜索词',
            width: 200,
            fixed: 'left',
            tooltip: true,
            sorter: (a: any, b: any) => a.searchWord.localeCompare(b.searchWord),
          },
          {
            dataIndex: 'hotSearchRank',
            title: '热搜排名',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.hotSearchRank - b.hotSearchRank,
          },
          {
            dataIndex: 'seIpvUvHits_tran',
            title: '搜索人数',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.seIpvUvHits_tran - b.seIpvUvHits_tran,
          },
          {
            dataIndex: 'clickHits_tran',
            title: '点击人数',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.clickHits_tran - b.clickHits_tran,
          },
          {
            dataIndex: 'clickRate',
            title: '点击率',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.clickRate - b.clickRate,
            dataType: 'customRender',
            render: (text: any, record: any, index: any) => {
              return text + '%';
            }
          },
          {
            dataIndex: 'payRate',
            title: '支付转化率',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.payRate - b.payRate,
            dataType: 'customRender',
            render: (text: any, record: any, index: any) => {
              return text + '%';
            }
          },
          {
            dataIndex: 'p4pRefPrice',
            title: '直通车参考价',
            width: 120,
            align: 'right',
            sorter: (a: any, b: any) => a.p4pRefPrice - b.p4pRefPrice,
            dataType: 'customRender',
            render: (text: any, record: any, index: any) => {
              if (typeof record.p4pRefPrice !== 'undefined') {
                return (text / 160).toFixed(2);
              } else {
                return '--';
              }
            }
          },
          {
            dataIndex: 'tmClickRate',
            title: '商城点击占比',
            width: 120,
            align: 'right',
            sorter: (a: any, b: any) => a.tmClickRate - b.tmClickRate,
            dataType: 'customRender',
            render: (text: any, record: any, index: any) => {
              return text + '%';
            }
          },
          {
            dataIndex: 'payUserNumber',
            title: '买家人数',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.payUserNumber - b.payUserNumber,
          },
        ]
      } else if (props.tab2.activeKey === 'soarList') {
        columns.value = [
          {
            dataIndex: 'date',
            title: '日期',
            width: 200,
            fixed: 'left',
            sorter: (a: any, b: any) => a.date.localeCompare(b.date),
          },
          {
            dataIndex: 'cate',
            title: '类目',
            width: 200,
            fixed: 'left',
            tooltip: true,
            sorter: (a: any, b: any) => a.cate.localeCompare(b.cate),
          }, {
            dataIndex: 'searchWord',
            title: '搜索词',
            width: 200,
            fixed: 'left',
            tooltip: true,
            sorter: (a: any, b: any) => a.searchWord.localeCompare(b.searchWord),
          },
          {
            dataIndex: 'soarRank',
            title: '飙升排名',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.soarRank - b.soarRank,
          },
          {
            dataIndex: 'seRiseRate',
            title: '搜索增长幅度',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.seRiseRate - b.seRiseRate,
            render: (text: any, record: any, index: any) => {
              if (isNaN(text)) {
                return '--';
              } else {
                return text + '%';
              }
            }
          },
          {
            dataIndex: 'seIpvUvHits_tran',
            title: '搜索人数',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.seIpvUvHits_tran - b.seIpvUvHits_tran,
          },
          {
            dataIndex: 'clickHits_tran',
            title: '点击人数',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.clickHits_tran - b.clickHits_tran,
          },
          {
            dataIndex: 'clickRate',
            title: '点击率',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.clickRate - b.clickRate,
            dataType: 'customRender',
            render: (text: any, record: any, index: any) => {
              if (isNaN(text)) {
                return '--';
              } else {
                return text + '%';
              }
            }
          },
          {
            dataIndex: 'payRate',
            title: '支付转化率',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.payRate - b.payRate,
            dataType: 'customRender',
            render: (text: any, record: any, index: any) => {
              if (isNaN(text)) {
                return '--';
              } else {
                return text + '%';
              }
            }
          },
          {
            dataIndex: 'p4pRefPrice',
            title: '直通车参考价',
            width: 120,
            align: 'right',
            sorter: (a: any, b: any) => a.p4pRefPrice - b.p4pRefPrice,
            dataType: 'customRender',
            render: (text: any, record: any, index: any) => {
              if (typeof record.p4pRefPrice !== 'undefined') {
                return (text / 160).toFixed(2);
              } else {
                return '--';
              }
            }
          },
          {
            dataIndex: 'payUserNumber',
            title: '买家人数',
            width: 100,
            align: 'right',
            sorter: (a: any, b: any) => a.payUserNumber - b.payUserNumber,
          },
        ]
      }
    } else if (['brandWord', 'coreWord', 'attrWord'].includes(props.tab1.activeKey)) {
      if (props.tab2.activeKey === 'hotList') {
        columns.value = [
          {
            dataIndex: 'date',
            title: '日期',
            width: 200,
            fixed: 'left',
            sorter: (a: any, b: any) => a.date.localeCompare(b.date),
          },
          {
            dataIndex: 'cate',
            title: '类目',
            width: 200,
            fixed: 'left',
            tooltip: true,
            sorter: (a: any, b: any) => a.cate.localeCompare(b.cate),
          }, {
            dataIndex: 'searchWord',
            title: '搜索词',
            width: 200,
            fixed: 'left',
            tooltip: true,
            sorter: (a: any, b: any) => a.searchWord.localeCompare(b.searchWord),
          },
          {
            dataIndex: 'hotSearchRank',
            title: '热搜排名',
            width: 100,
            align: 'center',
            sorter: (a: any, b: any) => a.hotSearchRank - b.hotSearchRank,
          },
          {
            dataIndex: 'relSeWordCnt',
            title: '相关搜索词数',
            width: 120,
            align: 'right',
            sorter: (a: any, b: any) => a.relSeWordCnt - b.relSeWordCnt,
          },
          {
            dataIndex: 'avgWordSeIpvUvHits_tran',
            title: '相关词搜索人数',
            width: 140,
            align: 'right',
            sorter: (a: any, b: any) => a.avgWordSeIpvUvHits_tran - b.avgWordSeIpvUvHits_tran,
          },
          {
            dataIndex: 'avgWordClickHits_tran',
            title: '相关词点击人数',
            width: 140,
            align: 'right',
            sorter: (a: any, b: any) => a.avgWordClickHits_tran - b.avgWordClickHits_tran,
          },
          {
            dataIndex: 'avgWordClickRate',
            title: '相关词点击率',
            width: 120,
            align: 'center',
            dataType: 'customRender',
            sorter: (a: any, b: any) => a.avgWordClickRate - b.avgWordClickRate,
            render: (text: any, record: any, index: any) => {
              if (isNaN(text)) {
                return '--';
              } else {
                return text + '%';
              }
            },
          },
          {
            dataIndex: 'avgWordPayRate',
            title: '词均支付转换率',
            width: 120,
            align: 'center',
            dataType: 'customRender',
            sorter: (a: any, b: any) => a.avgWordPayRate - b.avgWordPayRate,
            render: (text: any, record: any, index: any) => {
              if (isNaN(text)) {
                return '--';
              } else {
                return text + '%';
              }
            },
          },
          {
            dataIndex: 'p4pRefPrice',
            title: '直通车参考价',
            width: 120,
            align: 'right',
            sorter: (a: any, b: any) => a.p4pRefPrice - b.p4pRefPrice,
            dataType: 'customRender',
            render: (text: any, record: any, index: any) => {
              if (typeof record.p4pRefPrice !== 'undefined') {
                return (text / 160).toFixed(2);
              } else {
                return '--';
              }
            }
          },
          {
            dataIndex: 'avgWordPayUserNumber',
            title: '词均支付人数',
            width: 120,
            align: 'right',
            sorter: (a: any, b: any) => a.avgWordPayUserNumber - b.avgWordPayUserNumber,
          },
        ]
      }else if(props.tab2.activeKey === 'soarList') {
            columns.value = [
              {
                dataIndex: 'date',
                title: '日期',
                width: 200,
                fixed: 'left',
                sorter: (a: any, b: any) => a.date.localeCompare(b.date),
              },
              {
                dataIndex: 'cate',
                title: '类目',
                width: 200,
                fixed: 'left',
                tooltip: true,
                sorter: (a: any, b: any) => a.cate.localeCompare(b.cate),
              }, {
                dataIndex: 'searchWord',
                title: '搜索词',
                width: 200,
                fixed: 'left',
                tooltip: true,
                sorter: (a: any, b: any) => a.searchWord.localeCompare(b.searchWord),
              },
              {
                dataIndex: 'hotSearchRank',
                title: '飙升排名',
                width: 100,
                align: 'center',
                sorter: (a: any, b: any) => a.hotSearchRank - b.hotSearchRank,
              },
              {
                dataIndex: 'avgWordSeRiseRate',
                title: '词均搜索增长幅度',
                width: 160,
                align: 'center',
                sorter: (a: any, b: any) => a.avgWordSeRiseRate - b.avgWordSeRiseRate,
                render: (text: any, record: any, index: any) => {
                  if (isNaN(text)) {
                    return '--';
                  } else {
                    return text + '%';
                  }
                }
              },
              {
                dataIndex: 'relSeWordCnt',
                title: '相关搜索词数',
                width: 140,
                align: 'right',
                sorter: (a: any, b: any) => a.relSeWordCnt - b.relSeWordCnt,
              },
              {
                dataIndex: 'avgWordSeIpvUvHits_tran',
                title: '相关词搜索人数',
                width: 140,
                align: 'right',
                sorter: (a: any, b: any) => a.avgWordSeIpvUvHits_tran - b.avgWordSeIpvUvHits_tran,
              },
              {
                dataIndex: 'avgWordClickHits_tran',
                title: '相关词点击人数',
                width: 140,
                align: 'right',
                sorter: (a: any, b: any) => a.avgWordClickHits_tran - b.avgWordClickHits_tran,
              },
              {
                dataIndex: 'avgWordClickRate',
                title: '相关词点击率',
                width: 120,
                align: 'center',
                dataType: 'customRender',
                sorter: (a: any, b: any) => a.avgWordClickRate - b.avgWordClickRate,
                render: (text: any, record: any, index: any) => {
                  if (isNaN(text)) {
                    return '--';
                  } else {
                    return text + '%';
                  }
                },
              },
              {
                dataIndex: 'avgWordPayRate',
                title: '词均支付转换率',
                width: 120,
                align: 'center',
                dataType: 'customRender',
                sorter: (a: any, b: any) => a.avgWordPayRate - b.avgWordPayRate,
                render: (text: any, record: any, index: any) => {
                  if (isNaN(text)) {
                    return '--';
                  } else {
                    return text + '%';
                  }
                },
              },
              {
                dataIndex: 'p4pRefPrice',
                title: '直通车参考价',
                width: 120,
                align: 'right',
                sorter: (a: any, b: any) => a.p4pRefPrice - b.p4pRefPrice,
                dataType: 'customRender',
                render: (text: any, record: any, index: any) => {
                  if (typeof record.p4pRefPrice !== 'undefined') {
                    return (text / 160).toFixed(2);
                  } else {
                    return '--';
                  }
                }
              },
              {
                dataIndex: 'avgWordPayUserNumber',
                title: '词均支付人数',
                width: 120,
                align: 'right',
                sorter: (a: any, b: any) => a.avgWordPayUserNumber - b.avgWordPayUserNumber,
              },
            ]
      }
    }
  }
}
const close = () => {
  emit("update:visible", false);
};
watch(() => props.visible, (status) => {
  if (status) {
    calc()
  }
})
</script>

<template>
  <custom-modal :title="title" width="95%" style="top: 20px;" :visible="visible" @close="close">
    <template #headerRight>
      <SYCMCustomModalHeaderNotice/>
    </template>
    <div style="max-height: calc(160vh-150px);">
      <base-table size="small" :columns="columns" :data-source="data" :table-name="title"></base-table>
    </div>
  </custom-modal>
</template>

<style scoped>

</style>
